<script setup lang="ts">
import { AddBoxOutlined } from "@vicons/material";
import { DataTableColumns, NButton, NFormItem, NInput, NSelect } from 'naive-ui';
import { h, inject, ref, watch } from 'vue';

function createData(): any[] {
    return [
        {
            key: 0,
        },

    ]
}
const steps = inject('steps') as any
const machine_room_nameRef = ref(null)
watch(() => steps, (newVal: any) => {
    console.log(newVal)
    machine_room_nameRef.value = newVal?.data?.value?.step1?.machine_room_name
}, { deep: true })

const options = [
    {
        label: '交换机',
    },
    {
        label: '防火墙',
    },
    {
        label: '光模块',
    },
    {
        label: '光纤',
    },
    {
        label: '网线',
    },
    {
        label: '电源线',
    },
    {
        label: '机柜',
    },
]

const data = ref(createData())
const createColumns = (): DataTableColumns<any> => [
    {
        title: '设备/物料类型',
        key: 'type',
        width: 400,
        render(row, index) {
            return h(NFormItem, {
                path: `wy[${index}].type`,
                rule: {
                    required: true,
                    message: '请输入设备/物料类型',
                    trigger: ['blur', 'select', 'input'],
                }
            }, {
                default: () => [
                    h(NSelect, {
                        value: row.type,
                        bordered: false,
                        options: options?.map(el => {
                            return {
                                label: el.label,
                                value: el.label
                            }
                        }),
                        clearable: true,
                        class: 'bg-transparent',
                        placeholder: '请输入设备/物料类型',
                        onChange: (v) => {
                            data.value[index].type = v
                        },
                    })
                    // 如果不用select来选择的话使用这个
                    //   h(NInput, {
                    //       value: row.type,
                    //       bordered: false,
                    //       class: 'bg-transparent',
                    //       placeholder: '请输入型号/规格',
                    //       onUpdateValue(v) {
                    //           data.value[index].type = v
                    //       },
                    //       onInput(v) {
                    //           data.value[index].type = v
                    //       }
                    //   })
                ]
            })
        },
    },
    {
        title: '型号/规格',
        key: 'specification',
        render(row, index) {
            return h(NFormItem, {
                path: `wy[${index}].specification`,
                rule: {
                    required: true,
                    message: '请输入型号/规格',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.specification,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入型号/规格',
                        onUpdateValue(v) {
                            data.value[index].specification = v
                        },
                        onInput(v) {
                            data.value[index].specification = v
                        }
                    })
                ]
            })
        },
    },
    {
        title: '数量',
        key: 'num',
        render(row, index) {
            return h(NFormItem, {
                path: `wy[${index}].num`,
                rule: {
                    required: true,
                    message: '请输入数量',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.num,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入数量',
                        onUpdateValue(v) {
                            data.value[index].num = v
                        },
                        onInput(v) {
                            data.value[index].num = v
                        }
                    })
                ]
            })
        },
    },
]
const emit = defineEmits(['update:value'])
watch(() => data, (data) => {
    console.log(data.value)
    emit('update:value', data.value)
}, {
    deep: true
})

const addRow = () => {
    data.value.push({
        key: data.value.length - 1,

    })
}

</script>

<template>
    <div class="mb-2 flex justify-between">
        <div></div>
        <NButton type="primary" @click="addRow">
            <template #icon>
                <n-icon>
                    <AddBoxOutlined />
                </n-icon>
            </template>
            新增设备信息
        </NButton>
    </div>
    <n-data-table :columns="createColumns()" :single-line="false" :bordered="true" :data="data" />
</template>